<!DOCTYPE html>
<html lang="en">

<head>
    <title>品学联萌</title>
    <#include "/pxlm/app/product/components/meta.html" />
    <#include "/pxlm/app/product/components/stylesheets.html" />
    <link rel="stylesheet" href="/pxlm/app/product/stylesheets/majors.css?v=1">
</head>

<body>
    <div id="app">
        <div class="top">
            <div class="icon">
                <img src="/pxlm/app/product/assets/img/logo.png" />
            </div>
            <div class="info">品学联萌</div>
            <div class="clock"></div>
        </div>
        <div class="content">
            <div class="category">
                <div class="category-item" v-bind:class="{ 'category-item-selected' : index === currentIndex }" v-for="(item, index) in categories" :key="index" @click="selectCategory(index, item)">{{ item.title }}</div>
            </div>
            <div class="majors">
                <div class="majors-title" v-if="categories && categories.length > 0">{{ categories[currentIndex].title }}</div>
                <div class="majors-list" v-if="categories && categories.length > 0 && categories[currentIndex].products && categories[currentIndex].products.length > 0">
                    <div class="majors-item" v-for="(item, index) in categories[currentIndex].products" :key="index" @click="goMajorDetail(item)">
                        <div class="major-title">{{ item.title }}</div>
                        <div class="major-subtitle">{{ item.subtitle }}</div>
                    </div>
                </div>
                <div class="no-item" v-else>
                    <img src="/pxlm/app/product/assets/img/no-item.png" />
                    <span>稍后再来试试吧</span>
                </div>
            </div>
        </div>
        <#include "/pxlm/app/product/components/tabbar.html" />
    </div>
    <#include "/pxlm/app/product/components/scripts.html" />
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data() {
            return {
                categories: [],
                currentIndex: 0
            }
        },
        mounted: function() {
            this.init();
        },
        methods: {
            init() {
                var categoryId = '${categoryId!}';
                var url = '${host!}/pxlm/app/product/api/products';
                var params = {};
                if (categoryId) {
                    params.categoryId = categoryId;
                }
                var success = res => {
                    console.log(res);
                    this.categories = res.info;
                    for (var i = 0; i < this.categories.length; i ++) {
                        if (this.categories[i].isSelected == 1) {
                            this.currentIndex = i;
                        }
                    }
                }
                var fail = res => {
                    console.log(res);
                }
                var complete = () => {}
                request(url, params, success, fail, complete);
            },
            selectCategory(index, category) {
                if (this.currentIndex === index) {
                    return;
                }
                this.currentIndex = index;
            },
            goMajorDetail(item) {
                window.location.href = '/pxlm/app/product/majorInfo?productId=' + item.id;
            }
        }
    })
    </script>
</body>

</html>